<template>
  <article class="page">
    <headerbar>
      我的荣誉
      <span v-if="tabIndex==1" @click="go('myHonorUpload')" class="head-btn" slot="btn">+ 添加</span>
    </headerbar>

    <section class="">
      <ul class="tab">
        <li @click="loadData(0)" :class="{'active':tabIndex==0}"><span>系统荣誉</span></li>
        <li @click="loadData(1)" :class="{'active':tabIndex==1}"><span>个人荣誉</span></li>
      </ul>
    </section>
    <section v-if="tabIndex==0" class="frame-content-sub no-bg">
      <systemHonorComponent></systemHonorComponent>
    </section>
    <section v-if="tabIndex==1" class="frame-content-sub no-bg">
      <cube-scroll ref="scroll" :options="options" @pulling-up="onPullingUp" @pulling-down="onPullingDown">
        <section class="self-height">
          <!--        <fetchData :loading="isLoading" :data="albums"></fetchData>-->
          <section class="d-scroll list-news-img list-block">
            <fetchData
              v-if="isLoading"
              :loading="isLoading"
              :data="swipeData"
            ></fetchData>
            <abnormal @refresh="receive" v-if="abnormal"></abnormal>
            <div class="item" v-for="(data,index) in swipeData" @click="goDetail(data)">
              <div class="img" v-if="false">
                <img src="../../../../static/images/user_bg.jpg" alt="">
              </div>
              <div class="cont ">
                <div class="head-my">
                  <div class="title-my">{{ data.honorName }}</div>
                  <div @click.stop="del(data.id,index)" class="right">
                    <!--                    <span class="icon-delete"></span>-->
                    删除
                  </div>
                </div>
                <div class="tip">
                  <span>颁奖时间：{{ getTime(data.awardTime) }}</span>
                </div>
              </div>
            </div>
            <noData
              v-if="!abnormal && !isLoading && swipeData.length === 0"
            ></noData>
            <onBottom v-else-if="onBottom"></onBottom>
            <div class="pdv-3"></div>
            <div class="pdv-3"></div>
            <div class="pdv-3"></div>
            <div class="pdv-3"></div>
          </section>
        </section>
      </cube-scroll>
    </section>
  </article>
</template>

<script>
import loginService from '@/service/loginService'
import moment from 'moment'
import systemHonorComponent from "@/components/common/systemHonorComponent.vue";

export default {
  name: 'myHonor',
  components: {systemHonorComponent},
  data() {
    return {
      swipeData: [],
      pageIndex: 1,
      tabIndex: 1,
      currentIndex: 1,
      userInfo: {},
      abnormal: false,
      isLoading: true,
      onBottom: false, // W onBottom
      options: {
        pullUpLoad: true,
        scrollbar: false,
        pullDownRefresh: {
          threshold: 90,
          stop: 0,
          txt: ' '
        },
      },
    }
  },
  created() {
    this.userInfo = this.$localStorage.get('userInfo')
    this.loadData(this.currentIndex)
  },
  methods: {
    go(name) {
      this.$router.push({name: name})
    },
    goDetail(data) {
      this.$store.state.myHonorDetail = data
      this.$router.push({name: 'myHonorDetail'})
    },
    loadData(index) {
      this.onBottom = false;
      this.abnormal = false;
      this.isLoading = true;
      // if (this.currentIndex !== index) {
      //   this.pageIndex = 1
      //   this.swipeData = []
      // }
      this.currentIndex = this.tabIndex = index
      if (index === 0) {
        return
      }
      let honorType
      if (index === 0) {
        honorType = '0'
      } else {
        honorType = '1'
      }
      let data = {
        page: this.pageIndex,
        limit: 20,
        honorType: honorType,
        userId: this.userInfo.id
      }
      loginService.honorInfoOwn(data).then((res) => {
        this.isLoading = false;
        if (res.code == 444) {
          this.abnormal = true;
          return;
        }
        if (res.code != 0) {
          return false;
        }
        // this.swipeData.push({'honorName':'我的荣誉1', 'awardTime':'2020-07-14 20:26'})
        if (res.code === 0 && res.data.length < 1) {
          this.options.pullUpLoad = false;
          this.onBottom = true
          return
        }
        this.pageIndex++
        this.swipeData = this.swipeData.concat(res.data || []);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
          this.$refs.scroll.forceUpdate(true, false);
        }, 100);
      })
    },
    receive() {
      this.options.pullUpLoad = true;
      this.swipeData = [];
      this.tabIndex = 1;
      this.pageIndex = 1;
      this.loadData();
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    onPullingDown() {
      this.options.pullUpLoad = true
      this.onBottom = false
      this.swipeData = []
      console.log('onPullingDown')
      this.pageIndex = 1
      this.loadData()
    },
    showImg(fileId) {
      let fileUrl = this.tools.getImgUrl(fileId)
      console.log('-------------fileUrl=', fileUrl)
      return fileUrl
    },
    uploadFile(data, name) {
      this.$store.state.myHonorUpload = data
      this.$router.push({name: name})
    },
    getTime(createTime) {
      return moment(createTime).format('YYYY年MM月DD日')
    },
    del(id, index) {
      let _this = this
      this.$createDialog({
        type: 'confirm',
        title: "温馨提示",
        content: '确认删除？',
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        onConfirm: () => {
          _this.deleteMaterialses(id, index);
        },
        onCancel: () => {
        }
      }).show()
    },
    deleteMaterialses(id, index) {
      this.fetchService.deleteHonor(id).then(res => {
        if (res.code !== 0) {
          return this.tools.tip(res.message)
        }
        this.tools.tip("删除成功")
        this.swipeData.splice(index, 1)
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.title-my {
  font-size: 16PX;
  font-weight: normal;
  min-height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 5rem;
}

.head-my {
  font-size: 15PX;
  display: flex;
  justify-content: space-between;
  width: 100%;

  .right {
    margin-right: 4%;
    color: #D81E06;

    .icon-delete {
      display: inline-block;
      background: url('../../../../static/images/dangjian/home/icon-delete-red.png') no-repeat center;
      width: 0.4rem;
      height: 0.4rem;
      background-size: 100% 100%;
      margin-right: 0.13333rem;
    }
  }
}
</style>
